<template>
    <div class="real-time-view">
        <el-dialog :visible.sync="datas.show" width="414px" top="8vh" @open="handleOpen" :key="dialogKey">
            <img src="@/assets/images/drag/phone.png" style="width: 375px" />
            <div class="screen">
                <div class="phone-all" ref="phoneAll" id="phoneAll">
                    <div
                        class="phone-container"
                        :style="{
                            'background-color': pageSetup.bgColor,
                            backgroundImage: 'url(' + pageSetup.bgImg + ')',
                        }"
                    >
                        <div>
                            <template v-for="(item, index) in pageComponents">
                                <component v-if="item" :key="index" :is="item.component" :datas="item" data-type="item.type" append-to-body></component>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <van-loading v-if="loading" size="24px" vertical>加载中...</van-loading> -->
        </el-dialog>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import utils from 'utils/index'; // 方法类

export default {
    name: 'RealTimeView',
    props: {
        datas: {
            show: false,
        },
        val: {
            type: Object,
            default: null,
            require: true,
        },
    },
    computed: {
        ...mapState({
            rightcom: (state) => state.dragEditor.rightcom,
            pageSetup: (state) => state.dragEditor.pageSetup,
            pageComponents: (state) => state.dragEditor.pageComponents,
        }),
    },
    data() {
        return {
            id: null, //当前页面
            index: '', // 当前选中的index
            onlyOne: ['1-5', '1-16'], // 只能存在一个的组件(组件的type)
            offsetY: 0, // 记录上一次距离父元素高度
            dialogKey: 0,
        };
    },
    mounted() {
        this.phoneAllDrag();
        this.phoneAllZoom();
    },
    methods: {
        ...mapActions('dragEditor', ['setPageComponents', 'setRightcom', 'setCurrentproperties']),
        handleOpen() {
            this.$nextTick(() => {
                this.dialogKey++;
            });
        },
        // 监听整个手机的移动事件
        phoneAllDrag() {
            let isDragging = false; // 标记是否正在拖拽
            let x = 0,
                y = 0;
            const element = document.getElementById('phoneAll');
            element.addEventListener('mousedown', function (e) {
                isDragging = true; // 开始拖拽
                x = e.pageX - element.offsetLeft;
                y = e.pageY - element.offsetTop;
            });
            document.addEventListener('mousemove', function (e) {
                if (isDragging) {
                    let left = e.pageX - x;
                    let top = e.pageY - y;
                    element.style.left = left + 'px';
                    element.style.top = top + 'px';
                }
            });
            document.addEventListener('mouseup', function () {
                isDragging = false; // 结束拖拽
            });
        },
        // 通过滚轮进行缩放
        phoneAllZoom() {
            const element = document.getElementById('phoneAll');
            let scale = 1; // 初始缩放比例
            const zoomSpeed = 0.1; // 缩放速度
            element.addEventListener('wheel', function (event) {
                event.preventDefault();
                const deltaY = event.deltaY;
                const direction = deltaY > 0 ? -1 : 1; // 判断滚轮方向（向下为缩小，向上为放大）
                scale += direction * zoomSpeed; // 更新缩放比例
                scale = Math.max(0.6, Math.min(scale, 1.4)); // 限制缩放范围
                element.style.transform = `scale(${scale})`; // 应用缩放效果
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.real-time-view {
    .screen {
        background-color: #f1f3f9;
        width: 375px;
        height: 600px;
        border: 0;
        overflow-y: auto;
        margin-top: -10px;
        padding: 10px;

        &::-webkit-scrollbar {
            display: none;
        }
    }
    .phone-container {
        flex: 1;
        box-sizing: border-box;
        cursor: pointer;
        width: 100%;
        min-height: 600px;
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;

        .pointer-events {
            pointer-events: none;
        }

        .components-class {
            border: 1px solid transparent;
            &:hover {
                border: 1px dashed #155bd4c4;
            }
        }

        .edit-seled {
            outline: 2px dashed #155bd4c4;
            outline-offset: -1px;
            z-index: 1;
        }
    }

    .app-empty-tips {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        color: #c0c4cc;
        font-size: 16px;
        position: absolute;
        top: 200px;
        left: 0;
        right: 0;
    }
}
</style>
